<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <base href="${baseHref}/">
      <link rel="stylesheet" type="text/css" href="./style.css">
      <title>Service Info</title>
  </head>
  <body>
    <div id="breadcrumb" class="breadcrumb">
    </div>
    <div id="root">
      <div class="app">
        <h4 class="info-main-title">服务</h4>
        <div class="info">
          <h4 class="info-title">基本信息</h4>
          <div class="container">
            <div class="bar left-bar">
              <ul class="item-ul">
                <li class="item-li">
                  <span class="key">服务名称：</span>
                  <span id="serviceName" class="value"></span>
                </li>
                <li class="item-li">
                  <span class="key">所属地域：</span>
                  <span id="regionId" class="value"></span>
                </li>
                <li class="item-li">
                  <span class="key">角色：</span>
                  <span id="role" class="value"></span>
                </li>
              </ul>
            </div>
            <div class="bar right-bar">
              <ul class="item-ul">
                <li class="item-li">
                  <span class="key">创建时间：</span>
                  <span id="createdTime" class="value"></span>
                </li>
                <li class="item-li">
                  <span class="key">修改时间：</span>
                  <span id="lastModifiedTime" class="value"></span>
                </li>
                <li class="item-li">
                  <span class="key">描述信息：</span>
                  <span id="description" class="value"></span>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="info">
          <h4 class="info-title">日志配置</h4>
          <div class="container">
            <div class="bar left-bar">
              <ul class="item-ul">
                <li class="item-li">
                  <span class="key">日志项目：</span>
                  <span id="logProject" class="value"></span>
                </li>
              </ul>
            </div>
            <div class="bar right-bar">
              <ul class="item-ul">
                <li class="item-li">
                  <span class="key">日志仓库：</span>
                  <span id="logStore" class="value"></span>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="info">
          <h4 class="info-title">网络配置</h4>
          <div class="container">
            <div class="bar left-bar">
              <ul class="item-ul">
                <li class="item-li">
                  <span class="key">公网访问：</span>
                  <span id="internetAccess" class="value"></span>
                </li>
                <li class="item-li">
                  <span class="key">交换机：</span>
                  <span id="vSwitchIds" class="value"></span>
                </li>
              </ul>
            </div>
            <div class="bar right-bar">
              <ul class="item-ul">
                <li class="item-li">
                  <span class="key">专有网络：</span>
                  <span id="vpcId" class="value"></span>
                </li>
                <li class="item-li">
                  <span class="key">安全组：</span>
                  <span id="securityGroupId" class="value"></span>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div id="nasConfig" class="info" style="visibility: hidden;">
          <h4 class="info-title">NAS 配置</h4>
          <div class="container">
            <div class="bar left-bar">
              <ul class="item-ul">
                <li class="item-li">
                  <span class="key">用户：</span>
                  <span id="userId" class="value"></span>
                </li>
              </ul>
            </div>
            <div class="bar right-bar">
              <ul class="item-ul">
                <li class="item-li">
                  <span class="key">用户组：</span>
                  <span id="groupId" class="value"></span>
                </li>
              </ul>
          </div>
        </div>
        <div id="nasMountTable" style="visibility: hidden;">
          <table class="table">
            <thead class="thead">
              <tr>
                <th width="70%">NAS 挂载源目录</th>
                <th>目标目录</th>
              </tr>
            </thead>
            <tbody id="mountPoints" class="tbody">
            </tbody>
          </table>
        </div>

      </div>
    </div>
    <script>
      const serviceNameElement = document.getElementById('serviceName');
      const regionIdElement = document.getElementById('regionId');
      const roleElement = document.getElementById('role');
      const internetAccessElement = document.getElementById('internetAccess');
      const createdTimeElement = document.getElementById('createdTime');
      const lastModifiedTimeElement = document.getElementById('lastModifiedTime');
      const descriptionElement = document.getElementById('description');
      const logProjectElement = document.getElementById('logProject');
      const vpcIdElement = document.getElementById('vpcId');
      const vSwitchIdsElement = document.getElementById('vSwitchIds');
      const securityGroupIdElement = document.getElementById('securityGroupId');
      const logStoreElement = document.getElementById('logStore');
      const userIdElement = document.getElementById('userId');
      const groupIdElement = document.getElementById('groupId');
      const mountPointsElement = document.getElementById('mountPoints');
      const breadcrumbElement = document.getElementById('breadcrumb');
      const nasMountTableElement = document.getElementById('nasMountTable');
      const nasConfigElement = document.getElementById('nasConfig');
      window.addEventListener('message', event => {
        const message = event.data;
        switch (message.command) {
          case 'updateInfo': {
            const serviceInfo = message.data;
            breadcrumbElement.textContent = `函数计算 / ${serviceInfo.regionId}`;
            serviceNameElement.textContent = serviceInfo.serviceName;
            regionIdElement.textContent = serviceInfo.regionId;
            roleElement.textContent = serviceInfo.role;
            internetAccessElement.textContent = serviceInfo.internetAccess ? '允许' : '不允许';
            createdTimeElement.textContent = new Date(serviceInfo.createdTime).toLocaleString();
            lastModifiedTimeElement.textContent = new Date(serviceInfo.lastModifiedTime).toLocaleString();
            descriptionElement.textContent = serviceInfo.description;
            if (serviceInfo.logConfig) {
              logProjectElement.textContent = serviceInfo.logConfig.project;
              logStoreElement.textContent = serviceInfo.logConfig.logstore;
            }
            if (serviceInfo.vpcConfig) {
              vpcIdElement.textContent = serviceInfo.vpcConfig.vpcId;
              securityGroupIdElement.textContent = serviceInfo.vpcConfig.securityGroupId;
              vSwitchIdsElement.innerHTML = serviceInfo.vpcConfig.vSwitchIds
                ? serviceInfo.vpcConfig.vSwitchIds.join('<br>') : '';
            }
            if (serviceInfo.nasConfig) {
              userIdElement.textContent = serviceInfo.nasConfig.userId;
              groupIdElement.textContent = serviceInfo.nasConfig.groupId;
              mountPointsElement.innerHTML = serviceInfo.nasConfig.mountPoints
              ?
                serviceInfo.nasConfig.mountPoints.map(mountPoint => {
                  return `
<tr>
  <td><div>${mountPoint.serverAddr}</div></td>
  <td><div>${mountPoint.mountDir}</div></td>
</tr>
`
                }).join('')
              :
                '';
              if (!serviceInfo.nasConfig.mountPoints || !serviceInfo.nasConfig.mountPoints.length) {
                nasMountTableElement.setAttribute('style', 'visibility: hidden;');
                nasConfigElement.setAttribute('style', 'visibility: hidden;');
              } else {
                nasMountTableElement.setAttribute('style', 'visibility: visible;');
                nasConfigElement.setAttribute('style', 'visibility: visible;');
              }
            }
          }
        }
      });
    </script>
  </body>
</html>
